﻿<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>视频直播测试</title>
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="wrapper">
        <h1 class="wrapper-title">视频直播测试</h1>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">拉流地址</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入拉流地址" class="layui-input" id="video-url" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">拉流秘钥</label>
                <div class="layui-input-inline rtmp-token-wrapper">
                    <input type="text" class="layui-input" id="video-token" placeholder="请输入拉流秘钥" value="">
                </div>
                <div class="layui-input-inline">
                    <input type="button" class="layui-btn" value="开始拉流" id="video-btn">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">视频播放器</label>
                <div class="layui-input-inline">
					<video class="centeredVideo" id="video-player" controls width="100%" height="540" autoplay>
						Your browser is too old which doesn't support HTML5 video.
					</video>
                </div>
            </div>
        </form>
        <script type="text/javascript" src="./js/flv.min.js"></script>
		<script type="text/javascript">
			var hostname = location.hostname;
			var prefix = "http://" + hostname + ":9010/live?app=live&stream=";
			document.getElementById("video-url").value = prefix;
			document.getElementById("video-btn").onclick = function(){
				if (flvjs.isSupported()) {
					var token = document.getElementById("video-token").value;
					var url = document.getElementById("video-url").value + token;
					//secret为鉴权参数，如果没有搭配鉴权服务器，可省略此参数
					//url = url + "&secret=MySecret";
                    var videoElement = document.getElementById('video-player');
                    var flvPlayer = flvjs.createPlayer({
                        "type": "flv",
						"isLive":true,
                        "url": url,
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
					flvPlayer.play();
                }
			};
        </script>
    </div>
</body>

</html>